/**
 * Created by Ysssssss on 2021/4/16.
 */

import React, {useCallback, useState, useContext, forwardRef} from 'react'
import CustomizeModal, {CustomizeModalButton, CustomizeModalContext} from "@common/presentational/CustomizeModal";
import { Input, Row, Col } from "antd";
import {CustomizeDndProvider, DraggableTag} from "@common/presentational/DndSort";
import {moveToNewIndex} from "@utils/arrayHelper";
import {useDispatch} from "react-redux";
import {createProductProperty, editProductProperty} from "@sagas/productCenter";
import notify from "@utils/tip";

const ProductPropertyEditContent = props => {
    const { productNature, callback } = props
    const { hide, params } = useContext(CustomizeModalContext)
    const dispatch = useDispatch();
    const [ {createName = '', items = []}, setPropertyInfo ] = useState(params)
    const [ inputText, setInputText ] = useState('')
    const { name } = params

    const handleNameChange = e => {
        setPropertyInfo({
            items,
            createName: e.currentTarget.value,
        })
    }

    const addProperty = () => {
        if (!inputText.trim()) {
            notify('请输入属性项', 'error')
            return;
        }
        if (items.includes(inputText.trim())) {
            notify('属性项已存在', 'error')
            return;
        }
        if (items.length >= 40) {
            notify('最多创建40个属性项', 'error')
            return;
        }
        setPropertyInfo({
            createName,
            items: [...items, inputText.trim()],
        })
        setInputText('')
    }

    const deleteProperty = index => {
        setPropertyInfo({
            createName,
            items: [...items.slice(0, index), ...items.slice(index + 1)],
        })
    }

    const submitProductProperty = () => {
        if (!name && !createName) {
            notify('请输入名称')
            return;
        }
        if (!items.length) {
            notify('请新建属性项')
            return;
        }
        if (name) {
            dispatch(editProductProperty({
                items,
                name
            }, () => {
                callback && callback()
                hide()
            }))
        } else {
            dispatch(createProductProperty({
                name: createName,
                productNature,
                items
            }, () => {
                callback && callback()
                hide()
            }))
        }
    }

    const moveTag = ((dragId, hoverId) => {
        let dragIndex = 0
        let hoverIndex = 0
        items.forEach((item, index) => {
            if(item === dragId) {
                dragIndex = index
            }
            if(item === hoverId) {
                hoverIndex = index
            }
        })
        console.log({
            items, dragIndex, hoverIndex
        })
        setPropertyInfo({
            items: moveToNewIndex(items, dragIndex, hoverIndex),
            createName,
        })
    })

    return (
        <>
            <Row className="modal-line">
                <Col span={4}>名称：</Col>
                <Col span={20}>
                    { name ? name : (
                        <Input value={createName} onChange={handleNameChange}/>
                    ) }
                </Col>
            </Row>
            <Row className="modal-line">
                <Input
                    placeholder="新建属性项"
                    allowClear
                    value={inputText}
                    onChange={e => setInputText(e.currentTarget.value)}
                    suffix={<span className="clr-green cur-poi" onClick={addProperty}>新建</span>}
                    onPressEnter={addProperty}
                />
            </Row>
            <Row className="modal-line">
                <span className="ft-clr-l ft-14">拖拽可调整属性值顺序，保存生效</span>
            </Row>
            <CustomizeDndProvider>
                <Row className="modal-line">
                    { items.map((property,index) => (
                        <DraggableTag className="property-item"
                                      key={property}
                                      id={property}
                                      type="productProperty"
                                      moveItemFunc={moveTag}
                                      closable
                                      onClose={deleteProperty.bind(this, index)}
                        >{ property }</DraggableTag>
                    )) }
                </Row>
            </CustomizeDndProvider>
            <CustomizeModalButton
                onOk={submitProductProperty}
                onCancel={hide}
            />
        </>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal title="规格组" ref={ref} className="product-property-modal">
        <ProductPropertyEditContent {...props}/>
    </CustomizeModal>
))

